<script setup lang="ts">

//引入请求方法
import {reqHospitalInfo} from '@/api/home/index.ts'
import type {HospitalResponseData, HospitalLevelAndRegionResponseData, HospitalInfo, Content} from "@/api/home/type.ts";
// 引入element-plus提供图标
import {Search} from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import {ref} from "vue";

// 创建路由器对象
let $router = useRouter()

//收集医院搜索的关键字
const hosname = ref<string>('')

//搜索组件的回调
const fetchData = async (keyWord: string, cb: any) => {
  // 当用户输入完关键字函数会执行一次，发请求获取需要展示的数据即可
  let result: HospitalInfo = await reqHospitalInfo(keyWord);
  console.log(result)
  // 整理数据，变成人家组件需要需要的数据格式
  let showData =  result.data.map(item=>{
    return {
      value:item.hosname,  //  展示的医院的名字
      hoscode:item.hoscode // 存储医院的编码
    }
  })
  // 把数据传递给组件
  cb(showData)
}

// 搜索列表中点击某一个推荐项  会注入选中的项
const goDetail = (item:any) =>{
  // 点击推荐项会进入到医院的详情页，将来需要携带query参数(医院的编码)
  $router.push({path:'/hospital',query:{hoscode:item.hoscode}})
}
</script>

<template>
  <div class="search">
    <el-autocomplete style="margin-right: 10px;width: 600px"
                     clearable
                     @select="goDetail"
                     v-model="hosname"
                     :fetch-suggestions="fetchData"
                     :trigger-on-focus="false"
                     placeholder="请输入医院名称" />
    <el-button type="primary" size="default" :icon="Search" @click="">搜索</el-button>
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
</style>
